$colors: #1d1d1b, #e8336e, #007036, #bc0b3b, #823783, #ec6608,#ec6608,#1d1d1b, #e8336e, #007036, #bc0b3b, #823783, #ec6608,#ec6608,#1d1d1b, #e8336e, #007036, #bc0b3b, #823783, #ec6608;

body{
  height: 300vh
}

:root{
  --width : 100%;
  --bg : #efefef;
}

.scroll-direction{
  font-size: 1.5rem;
  
}
.scroll-direction:after{
  content: attr(data-direction);

}

header{
  position: fixed;
  width: var(--width);
  margin: 0;
  background: var(--bg);
  padding: 1rem;
  height: 100vh;

  
}

.logo{
  position: absolute;
  transform: translate3d(0,0,0);
  height: 30rem;
  top:50%;
   left:50%;
  transform: translate(-50%, -50%)
   
}

main, article{
  height: 100%;
  
}

.wrapper{
  margin: 0 auto;
  max-width: var(--width);
 
}

